<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box; /* 添加盒模型，防止边框影响布局 */
        }

        body {
            background: url(images/1.jpg) no-repeat center center;
            background-size: cover; /* 使背景图片铺满整个页面 */
        }

        .nav {
            display: flex; /* 使用 flex 布局让图片整齐排列 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 图片之间的间距 */
            width: 700px;
            height: 200px;
            margin: 100px auto; /* 居中显示 */
            border: 1px solid #ccc;
            padding: 10px; /* 添加内边距 */
            background-color: rgba(255, 255, 255, 0.7); /* 添加半透明背景 */
        }

        img {
            width: 150px; /* 统一图片宽度 */
            height: 200px; /* 统一图片高度 */
            object-fit: cover; /* 保持图片比例，裁剪过大部分 */
            border-radius: 8px; /* 图片圆角 */
            cursor: pointer; /* 鼠标悬停时变成手指 */
            transition: transform 0.3s ease, opacity 0.3s ease; /* 添加动画效果 */
        }

        img:hover {
            transform: scale(1.1); /* 鼠标悬停时放大图片 */
            opacity: 0.8; /* 图片透明度变化 */
        }

    </style>
</head>

<body>
    <div class="nav">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
    </div>
    <script>
        var images = document.querySelector('.nav').querySelectorAll('img'); //获取nav下面的 所有img
        for (var i = 0; i < images.length; i++) { //循环
            images[i].onclick = function() { //images里面的第 i 个 点击事件
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
                // this.src 就是我们点击图片的路径   images/2.jpg
                // 把这个路径 this.src 给body 就可以了
                //body的背景图片 url(images/1.jpg) 更换为 '+this.src+';
            }
        }
    </script>
</body>

</html>
